<!-- 基本信息卡片 -->
<div class="content-card mb-4">
    <div class="row">
        <div class="col-md-3 text-center">
            <div class="mb-3">
                <img th:src="${collector.avatar ?: '/images/default-avatar.png'}" 
                     class="rounded-circle" style="width: 150px; height: 150px; object-fit: cover;">
            </div>
            <button class="btn btn-sm btn-outline-primary" onclick="$('#avatarInput').click()">
                <i class="bx bx-camera"></i> 更换头像
            </button>
            <input type="file" id="avatarInput" hidden accept="image/*" onchange="uploadAvatar(this)">
        </div>
        <div class="col-md-9">
            <h4 class="mb-4" th:text="${collector.realName + ' (' + collector.username + ')'}">李四 (collector001)</h4>
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">手机号</label>
                    <p class="form-control-static" th:text="${collector.phone}">13900139000</p>
                </div>
                <div class="col-md-6">
                    <label class="form-label">服务区域</label>
                    <p class="form-control-static" th:text="${collector.serviceArea}">朝阳区</p>
                </div>
                <div class="col-md-6">
                    <label class="form-label">账号状态</label>
                    <p class="form-control-static">
                        <span th:class="${'badge ' + (collector.status == 1 ? 'bg-success' : 'bg-danger')}"
                              th:text="${collector.status == 1 ? '正常' : '禁用'}">正常</span>
                    </p>
                </div>
                <div class="col-md-6">
                    <label class="form-label">注册时间</label>
                    <p class="form-control-static" th:text="${#temporals.format(collector.createTime, 'yyyy-MM-dd HH:mm')}">2025-02-10 10:00</p>
                </div>
            </div>
            <div class="mt-4">
                <button class="btn btn-primary" onclick="editCollector()">
                    <i class="bx bx-edit"></i> 编辑信息
                </button>
                <button th:if="${collector.status == 1}" class="btn btn-warning" 
                        th:onclick="'updateStatus(' + ${collector.id} + ', 0)'">
                    <i class="bx bx-block"></i> 禁用账号
                </button>
                <button th:if="${collector.status == 0}" class="btn btn-success"
                        th:onclick="'updateStatus(' + ${collector.id} + ', 1)'">
                    <i class="bx bx-check"></i> 启用账号
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 统计数据卡片 -->
<div class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="stat-card">
            <div class="icon bg-primary bg-opacity-10 text-primary">
                <i class="bx bxs-star"></i>
            </div>
            <div class="title">平均评分</div>
            <div class="value" th:text="${#numbers.formatDecimal(collector.averageRating ?: 0, 1, 1)}">4.5</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="icon bg-success bg-opacity-10 text-success">
                <i class="bx bxs-calendar"></i>
            </div>
            <div class="title">本月订单</div>
            <div class="value" th:text="${collector.monthlyOrders ?: 0}">10</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="icon bg-warning bg-opacity-10 text-warning">
                <i class="bx bxs-package"></i>
            </div>
            <div class="title">总订单</div>
            <div class="value" th:text="${collector.totalOrders ?: 0}">100</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="icon bg-info bg-opacity-10 text-info">
                <i class="bx bx-money"></i>
            </div>
            <div class="title">本月收入(元)</div>
            <div class="value" th:text="${#numbers.formatDecimal(collector.monthlyIncome ?: 0, 1, 2)}">1000.00</div>
        </div>
    </div>
</div>

<!-- 图表区域 -->
<div class="row g-3 mb-4">
    <div class="col-md-8">
        <div class="content-card">
            <h5 class="mb-3">订单趋势</h5>
            <canvas id="orderTrendChart"></canvas>
        </div>
    </div>
    <div class="col-md-4">
        <div class="content-card">
            <h5 class="mb-3">物品分布</h5>
            <canvas id="itemDistributionChart"></canvas>
        </div>
    </div>
</div>

<!-- 最近订单 -->
<div class="content-card">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="mb-0">最近订单</h5>
        <div>
            <button class="btn btn-primary" onclick="exportOrders()">
                <i class="bx bx-export"></i> 导出订单
            </button>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>订单号</th>
                    <th>用户</th>
                    <th>物品类型</th>
                    <th>重量(kg)</th>
                    <th>金额(元)</th>
                    <th>评分</th>
                    <th>状态</th>
                    <th>创建时间</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="order : ${recentOrders}">
                    <td th:text="${order.orderNo}">ON202502100001</td>
                    <td th:text="${order.userName}">张三</td>
                    <td th:text="${order.itemType}">纸类</td>
                    <td th:text="${order.actualWeight ?: order.estimatedWeight}">5.0</td>
                    <td th:text="${#numbers.formatDecimal(order.price ?: 0, 1, 2)}">25.00</td>
                    <td>
                        <div class="d-flex align-items-center" th:if="${order.rating}">
                            <i class="bx bxs-star text-warning"></i>
                            <span th:text="${order.rating}">4.5</span>
                        </div>
                        <span th:unless="${order.rating}">-</span>
                    </td>
                    <td>
                        <span th:class="${'badge ' + 
                            (order.status == 'PENDING' ? 'bg-warning' :
                             order.status == 'PROCESSING' ? 'bg-info' :
                             order.status == 'COMPLETED' ? 'bg-success' : 'bg-danger')}"
                              th:text="${order.status == 'PENDING' ? '待处理' :
                                       order.status == 'PROCESSING' ? '处理中' :
                                       order.status == 'COMPLETED' ? '已完成' : '已取消'}">
                            已完成
                        </span>
                    </td>
                    <td th:text="${#temporals.format(order.createTime, 'yyyy-MM-dd HH:mm')}">2025-02-10 10:00</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- 编辑模态框 -->
<div class="modal fade" id="collectorModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑回收员</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="collectorForm">
                    <input type="hidden" name="id" th:value="${collector.id}">
                    <div class="mb-3">
                        <label class="form-label">真实姓名</label>
                        <input type="text" class="form-control" name="realName" th:value="${collector.realName}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">手机号</label>
                        <input type="tel" class="form-control" name="phone" th:value="${collector.phone}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">服务区域</label>
                        <input type="text" class="form-control" name="serviceArea" th:value="${collector.serviceArea}" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="updateCollector()">保存</button>
            </div>
        </div>
    </div>
</div>

<script>
// 初始化图表
$(document).ready(function() {
    loadOrderTrend();
    loadItemDistribution();
});

// 加载订单趋势图表
function loadOrderTrend() {
    $.get('/admin/collectors/' + collectorId + '/order-trend', function(data) {
        new Chart(document.getElementById('orderTrendChart'), {
            type: 'line',
            data: {
                labels: data.map(item => item.date),
                datasets: [{
                    label: '订单数量',
                    data: data.map(item => item.count),
                    borderColor: '#0d6efd',
                    backgroundColor: '#0d6efd20',
                    fill: true
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    }
                }
            }
        });
    });
}

// 加载物品分布图表
function loadItemDistribution() {
    $.get('/admin/collectors/' + collectorId + '/item-distribution', function(data) {
        new Chart(document.getElementById('itemDistributionChart'), {
            type: 'doughnut',
            data: {
                labels: data.map(item => item.type),
                datasets: [{
                    data: data.map(item => item.count),
                    backgroundColor: [
                        '#0d6efd',
                        '#198754',
                        '#ffc107',
                        '#dc3545'
                    ]
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    });
}

// 编辑回收员
function editCollector() {
    $('#collectorModal').modal('show');
}

// 更新回收员信息
function updateCollector() {
    const data = {};
    $('#collectorForm').serializeArray().forEach(item => {
        if (item.value) {
            data[item.name] = item.value;
        }
    });
    
    $.ajax({
        url: '/admin/collectors/' + collectorId,
        type: 'PUT',
        contentType: 'application/json',
        data: JSON.stringify(data),
        success: function() {
            $('#collectorModal').modal('hide');
            Swal.fire({
                icon: 'success',
                title: '保存成功',
                showConfirmButton: false,
                timer: 1500
            }).then(() => {
                location.reload();
            });
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: '保存失败',
                text: xhr.responseJSON?.message || '请稍后重试'
            });
        }
    });
}

// 更新状态
function updateStatus(id, status) {
    Swal.fire({
        title: '确认' + (status === 1 ? '启用' : '禁用') + '该回收员？',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then((result) => {
        if (result.isConfirmed) {
            $.post('/admin/collectors/' + id + '/status', { status: status })
                .done(function() {
                    Swal.fire({
                        icon: 'success',
                        title: '操作成功',
                        showConfirmButton: false,
                        timer: 1500
                    }).then(() => {
                        location.reload();
                    });
                })
                .fail(function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: '操作失败',
                        text: xhr.responseJSON?.message || '请稍后重试'
                    });
                });
        }
    });
}

// 上传头像
function uploadAvatar(input) {
    if (input.files && input.files[0]) {
        const formData = new FormData();
        formData.append('avatar', input.files[0]);
        
        $.ajax({
            url: '/admin/collectors/' + collectorId + '/avatar',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                location.reload();
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: '上传失败',
                    text: xhr.responseJSON?.message || '请稍后重试'
                });
            }
        });
    }
}

// 导出订单
function exportOrders() {
    window.location.href = '/admin/collectors/' + collectorId + '/orders/export';
}
</script> 